import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { EventEvidence } from '@/components/events/event-evidence';
import { EventList } from '@/components/events/event-row';
import { CountryChip, EventTypeBadge, ImportanceMeter, SignificanceBadge } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { Container, Note } from '@/components/ui/section';
import { api, ApiError, safe } from '@/lib/api';
import { fmtDateTime, fmtInt } from '@/lib/format';
import { routes, SITE_NAME } from '@/lib/site';
import type { EventDetail } from '@/lib/types';

export const revalidate = 120;

async function load(id: string): Promise<EventDetail> {
  try {
    return await api.event(id);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
}

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const e = await safe(api.event(id));
  if (!e) return { title: 'Event' };
  return { title: e.title, description: e.summary ?? `${e.event_type} event detected for ${e.company.display_name} on ${fmtDateTime(e.detected_at)}.`, alternates: { canonical: `/events/${e.id}` }, openGraph: { title: `${e.title} | ${SITE_NAME}`, description: e.summary ?? undefined, type: 'article', publishedTime: e.detected_at }, robots: e.status === 'active' ? undefined : { index: false } };
}

export default async function EventPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const e = await load(id);
  const related = await safe(api.companyEvents(e.company.slug, { per_page: 6 }));
  const others = (related?.items ?? []).filter((x) => x.id !== e.id).slice(0, 5);
  const jsonLd = { '@context': 'https://schema.org', '@type': 'NewsArticle', headline: e.title, datePublished: e.detected_at, dateModified: e.detected_at, about: { '@type': 'Organization', name: e.company.display_name, url: `https://${e.company.canonical_domain}` }, isBasedOn: e.source_url ?? undefined, publisher: { '@type': 'Organization', name: SITE_NAME } };
  return (
    <Container>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <div className="pb-4 pt-6 md:pt-10">
        <p className="eyebrow flex flex-wrap items-center gap-2">
          <Link href={routes.events()} className="hover:text-ink">
            Events
          </Link>
          <span>/</span>
          <EventTypeBadge type={e.event_type} subtype={e.event_subtype} />
          {e.status !== 'active' && <span className="text-danger">{e.status}</span>}
        </p>
        <h1 className={`display mt-2 text-[26px] md:text-[36px] ${e.status === 'retracted' ? 'line-through decoration-danger/60' : ''}`}>{e.title}</h1>
        <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-ink-2">
          <Link href={routes.company(e.company.slug)} className="font-medium text-ink hover:text-accent">
            {e.company.display_name}
          </Link>
          <span className="mono text-xs text-ink-3">{e.company.canonical_domain}</span>
          <CountryChip code={e.company.country} />
          <span className="inline-flex items-center gap-1.5 text-xs text-ink-3">
            <ImportanceMeter importance={e.importance} /> detected <LiveAgo at={e.detected_at} tick={30000} />
          </span>
        </div>
        {e.summary && <p className="mt-4 max-w-3xl text-[16px] leading-relaxed text-ink-2">{e.summary}</p>}
      </div>
      <div className="grid gap-8 lg:grid-cols-12">
        <div className="lg:col-span-8">
          <p className="eyebrow mb-2">Evidence</p>
          <EventEvidence event={e} sources={e.sources} />
          {e.change && (
            <section className="mt-6">
              <p className="eyebrow mb-2">Underlying change</p>
              <div className="flex flex-wrap items-center gap-3 border border-rule p-3 text-sm">
                <SignificanceBadge value={e.change.significance} />
                <span className="tnum text-ink-2">
                  +{fmtInt(e.change.blocks_added)} / −{fmtInt(e.change.blocks_removed)} / ~{fmtInt(e.change.blocks_modified)} blocks
                </span>
                <span className="text-xs text-ink-3">on {e.change.surface} · {fmtDateTime(e.change.detected_at)}</span>
                <Link href={routes.change(e.change.id)} className="link ml-auto text-xs">
                  Open block-level diff →
                </Link>
              </div>
            </section>
          )}
          {Object.keys(e.payload ?? {}).length > 0 && (
            <details className="mt-6">
              <summary className="cursor-pointer text-sm text-ink-2 hover:text-ink">Structured payload & entities</summary>
              <pre className="mt-2 overflow-x-auto border border-rule bg-surface-2 p-3 text-xs">{JSON.stringify({ payload: e.payload, entities: e.entities }, null, 2)}</pre>
            </details>
          )}
        </div>
        <aside className="lg:col-span-4">
          <p className="eyebrow mb-2">More from {e.company.display_name}</p>
          <EventList events={others} variant="table" showCompany={false} emptyLabel="No other events yet." />
          <p className="mt-2 text-sm">
            <Link href={routes.company(e.company.slug, 'timeline')} className="link">
              Company timeline →
            </Link>
          </p>
          <Note className="mt-6">This event is an interpretation of an observed change on a public web page. It links to the page as it was when detected; if the page has since been removed, the observation is preserved in the snapshot archive.</Note>
        </aside>
      </div>
    </Container>
  );
}